<template>
    <div class="w-full">
        <!-- 歌手信息 -->
        <div class="flex">
            <img :src="singerInfo?.artist.avatar" class="rounded-md w-52 h-5w-52">
            <div class="ml-5">
                <p v-if="singerInfo?.artist.identifyTag">{{ singerInfo?.artist.identifyTag[0] }}</p>
                <p v-else>艺术家</p>
                <h1 class="text-[4rem] py-1">{{ singerInfo?.artist.name }}</h1>
                <span v-for="(item, index) in singerInfo?.artist.alias">{{ item }}<span
                        v-if="index !== singerInfo?.artist.alias.length as number - 1"> /&nbsp;</span></span>
                <div class="my-3">
                    <i class="iconfont icon-yinfu"></i><span class="mr-3">{{ singerInfo?.artist.musicSize }}</span>
                    <i class="iconfont icon-qiepian"></i><span class="mr-3">{{ singerInfo?.artist.albumSize }}</span>
                    <i class="iconfont icon-shipinbofang"></i><span class="mr-3">{{ singerInfo?.artist.mvSize }}</span>
                </div>
            </div>
        </div>
        <!-- 操作 -->
        <div class="flex mt-5">
            <div class="hover:bg-[var(--inputBg)] w-fit rounded-full px-4 py-3">
                <i
                    class="iconfont icon-aixin before:text-3xl cursor-pointer text-[var(--playBg)] hover:bg-[var(--inputBg)]"></i>
            </div>
            <div class="hover:bg-[var(--inputBg)] w-fit rounded-full px-4 py-3">
                <i
                    class="iconfont icon-yonghu-yuan before:text-3xl cursor-pointer text-[var(--playBg)] hover:bg-[var(--inputBg)]"></i>
            </div>
        </div>
        <!-- 导航栏 -->
        <nav class="my-6 flex">
            <ul class="flex rounded-full bg-[var(--inputBg)] justify-between">
                <li class="active conNav" @click="getNavEl($event, 0)">
                    专辑</li>
                <li class="conNav" @click="getNavEl($event, 1)">
                    MV</li>
                <li class="conNav" @click="getNavEl($event, 2)">
                    歌手详情</li>
                <li class="conNav" @click="getNavEl($event, 3)">
                    相似歌手</li>
            </ul>
        </nav>
        <!-- 专辑列表 -->
        <ul class="grid grid-cols-4 gap-8" v-if="navIndex === 0">
            <el-skeleton v-for="_ in 12" :loading="artistAlbumLoad" animated>
                <template #template>
                    <el-skeleton-item variant="image" style="width: 14rem; height: 14rem" />
                    <div style="padding: 14px">
                        <el-skeleton-item variant="h3" style="width: 100%" />
                        <div style="
              display: flex;
              align-items: center;
              justify-items: space-between;
              margin-top: 16px;
              height: 16px;
            ">
                            <el-skeleton-item variant="text" style="margin-right: 16px" />
                            <el-skeleton-item variant="text" style="width: 30%" />
                        </div>
                    </div>
                </template>
            </el-skeleton>
            <li v-for="item in artistAlbumList" class="cursor-pointer relative group/item" :key="item.id">
                <img class="rounded-md object-cover w-56 h-56" :src="item.picUrl" alt="">
                <p class="my-2 min-h-12 line-clamp-2">{{ item.name }}<span v-if="item.alias.length"
                        class="text-gray-500">（{{
                            item.alias[0] }}）</span></p>
                <p class="text-sm text-gray-500">{{ timestampToDate(item.publishTime) }}</p>
                <div @click="goToAlbumInfo(item.id)"
                    class="bg-[rgba(0,0,0,0.4)] absolute top-0 invisible left-0 group-hover/item:visible w-56 h-56 rounded-md flex justify-center items-center">
                    <div class="rounded-full bg-white py-3 px-4">
                        <i class="iconfont icon-24gf-play before:text-xl text-[var(--playBg)]"></i>
                    </div>
                </div>
            </li>

        </ul>
        <!-- MV列表 -->
        <ul class="grid grid-cols-3 gap-3" v-if="navIndex === 1">
            <el-skeleton v-for="_ in 9" :loading="mvLoad" animated>
                <template #template>
                    <el-skeleton-item variant="image" style="width: 100%; height: 11rem" />
                    <div style="padding: 14px">
                        <el-skeleton-item variant="h3" style="width: 100%" />
                    </div>
                </template>
            </el-skeleton>
            <li class="absolute right-1/2">
                <el-empty v-if="mvList.length === 0" description="没有相关MV" />
            </li>
            <li @click="router.push({ name: 'mv', query: { id: item.id } })" v-for="item in mvList" :key="item.id"
                class="relative cursor-pointer">
                <img class="rounded-md object-cover w-full h-44" :src="item.imgurl" alt="">
                <div class="absolute top-1 right-2 text-white">
                    <i class="iconfont icon-24gf-play mr-2"></i>
                    <span>{{ setVNumber(item.playCount) }}</span>
                </div>
                <p class="my-2 line-clamp-1">{{ item.name }}</p>
            </li>
        </ul>
        <!-- 歌手详情 -->
        <div v-if="navIndex === 2">
            <p>
                {{ singerInfo?.artist.name }}简介
            </p>
            <p class="text-gray-500 indent-8 min-h-72 mt-2">
                {{ singerInfo?.artist.briefDesc ? singerInfo?.artist.briefDesc : '暂无简介' }}
            </p>
        </div>
        <!-- 相似歌手 -->
        <ul class="grid grid-cols-5 gap-4" v-if="navIndex === 3">
            <el-skeleton v-for="_ in 15" :loading="singerLoad" animated>
                <template #template>
                    <el-skeleton-item variant="image" style="width: 10rem; height: 11rem" />
                    <div style="padding-top: 14px">
                        <el-skeleton-item variant="h3" style="width: 70%" />
                    </div>
                </template>
            </el-skeleton>
            <li class="absolute right-1/2">
                <el-empty v-if="singerList.length === 0" description="没有相关歌手" />
            </li>
            <li @click="goTOSingerInfo(item.id)" v-for="item in singerList"
                class="scale-100 relative hover:scale-105 transition-all cursor-pointer">
                <img class="rounded-md w-40" :src="item.img1v1Url" alt="">
                <p class="my-2 line-clamp-1">{{ item.name }}</p>
            </li>
        </ul>
    </div>
</template>

<script setup lang='ts'>
import { ref, onMounted, onUnmounted, watch } from 'vue';
import { useStore } from '@renderer/store/index'
import { storeToRefs } from 'pinia';
import { useRoute, useRouter } from 'vue-router'
import { timestampToDate, setVNumber } from "@renderer/hooks"
const { ipcRenderer } = require('electron')
const route = useRoute()
const router = useRouter()
const { singerDetail, artistAlbum } = useStore()
const { singerInfo } = storeToRefs(singerDetail)
const { artistAlbumList } = storeToRefs(artistAlbum)
const scrollValue = ref<string | number>(0)
const singerId = ref(route.query.id as number | string)
const navIndex = ref(0)
const mvList = ref<mvType[]>([])
const singerList = ref<artistsType[]>([])
const artistAlbumLoad = ref(true)
const mvLoad = ref(true)
const singerLoad = ref(true)
type mvType = {
    id: number
    duration: number
    imgurl: string
    name: string
    playCount: number
}
type artistsType = {
    id: number
    name: string
    img1v1Url: string
}
watch(() => route.query.id, (newValue, oldValue) => {
    if (newValue !== oldValue) {
        singerId.value = newValue as string
        getSingerInfo(newValue as string)
        navIndex.value = 0
        // @ts-ignore
        getNavEl({ target: document.getElementsByClassName('conNav')[0] }, 0)
        document.querySelector('#main')?.scrollTo(0, 0)
    }

})
onMounted(() => {
    getSingerInfo(singerId.value)
    scrollValue.value = route.query.scrollValue as number | string
    document.querySelector('#main')?.scrollTo(0, 0)
})
onUnmounted(() => {
    document.querySelector('#main')?.scrollTo(0, scrollValue.value as number)
})
// 切换导航
function getNavEl(e: Event, index: number) {
    let list = document.getElementsByClassName('conNav')
    let main = document.getElementById('main')
    for (let i = 0; i < list.length; i++) {
        list[i].classList.remove('active')
    }
    (e.target as HTMLElement).classList.add('active')
    navIndex.value = index
    switch (index) {
        case 0:
            getArtistAlbum(singerId.value)
            break
        case 1:
            getSingerMv(singerId.value)
            break
        case 3:
            getSimiSinger(singerId.value)
            break
    }
    main?.scrollTo(0, 0)
}
// 获取歌手信息
const getSingerInfo = async (id: number | string) => {
    await singerDetail.getSingerDetail(id).then(async () => {
        getArtistAlbum(id)
    })
}
// 获取歌手专辑
const getArtistAlbum = async (id: number | string) => {
    await artistAlbum.getArtistAlbum(id).then(() => {
        artistAlbumLoad.value = false
    })
}
// 获取歌手MV
const getSingerMv = async (id: number | string) => {
    await ipcRenderer.invoke('getArtist_mv', id).then((res: mvType[]) => {
        mvList.value = res
        mvLoad.value = false
    })
}
// 获取相似歌手
const getSimiSinger = async (id: number | string) => {
    await ipcRenderer.invoke('getSimi_artist', id).then((res: artistsType[]) => {
        singerList.value = res
        singerLoad.value = false
    })
}
// 相似歌手
const goTOSingerInfo = (id: number | string) => {
    router.push({ name: 'singerInfo', query: { id } })
}
// 跳转专辑详情页
const goToAlbumInfo = (id: number | string) => {
    router.push({ name: 'albumInfo', query: { id } })
}
</script>
<style scoped lang='less'>
</style>